/**
 * Severity classes
 */
@each $color, $value in $severity-colors {
  .alert.c-#{$color} {
    background-color: $value;
    color: $white;
    font-weight: bold;

    .text-muted {
      color: $value !important;
      font-weight: normal;
    }
  }

  .progress-bar.c-#{$color} {
    background-color: $value;
    border-color: $value !important;
  }

  .text-c-#{$color} {
    color: $value;
  }
}

$buffers-colors: (
  hit: map-get($severity-colors, 1),
  read: map-get($severity-colors, 2),
  dirtied: map-get($severity-colors, 3),
  written: map-get($severity-colors, 4),
) !default;


/**
 * Shared buffers classes
 */
@each $color, $value in $buffers-colors {
  .bg-#{$color} {
    background-color: $value;
  }
  .border-#{$color} {
    border-color: $value !important;
  }
}

.btn-group-xs > .btn, .btn-xs {
  padding: .25rem .4rem;
  font-size: $fontSizeSm;
  border-radius: .2rem;

  &, .fa {
    line-height: .5;
  }
}

/*
 * Used with @extend in .plan-node.never-executed
 */
%bg-hatched {
  $color: rgba(255, 255, 255, 0.6);
  $angle: 45deg;
  $progress-height: 1rem !default;
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-size: $progress-height $progress-height;
}

.bg-hatched {
  @extend %bg-hatched;
}

.border-dashed {
  border-style: dashed !important;
  background-color: transparent !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
